<template>
	<view>
		<u-navbar :border-bottom="false" title="" title-color="red" height="44">
			<view class="flex flex-jc-sb flex-ai-c newsbox" style="flex:1">
				<view></view>
				<view class="toubucss">
					<text>{{title | cutString(25)}}</text>
				</view>
				<view class="kefuimg" @click="gotoStore">
					<view class="kefuname">
						进店
					</view>
				</view>
			</view>
		</u-navbar>
<!-- :calc(100+'vh' - statusBarHeight+'px') -->
		<view class="content" @touchstart="hideDrawer">
			<scroll-view scroll-y="true" class="msg-list" :scroll-with-animation="scrollAnimation"
				:scroll-top="scrollTop" :show-scrollbar='false' :scroll-into-view="scrollToView"
				@scrolltoupper="loadHistory" upper-threshold="50">
				<view>
					<view class="row" v-for="(item,index) in msgList" :key="index" :id="item.ID">
						<!-- 用户消息 -->
						<block>
							<!-- 自己发出的消息 -->
							<view class="my" v-if="item.flow=='out'" style="position: relative;right: 20rpx;">
								<!-- 左-消息 -->
								<view class="left">
									<!-- 文字消息 -->
									<view v-if="item.type==TIM.TYPES.MSG_TEXT" class="bubble"
										style="background-color: rgb(251,210,32);position: relative;">
										<!-- <view class="horn"></view> -->
										<rich-text :nodes="nodesFliter(item.payload.text)" :selectable="true">
										</rich-text>
									</view><!-- #e5e5e5 -->
									<!-- 图片消息 -->
									<view v-else-if="item.type== 'TIMCustomElem' && item.payload.data === 'chatFile'"
										class="bubble" @click="previewImage(item.payload.description)">
										<image :src="item.payload.description" mode="aspectFit"></image>
									</view>
									<!-- 订单链接 -->
									<view v-else-if="item.type== 'TIMCustomElem' && item.payload.data === 'orderInfo'"
										@click='clickFn(item.payload.extension,false)'>
										<tim-card :info='JSON.parse(item.payload.description)'></tim-card>
									</view>
									<!-- 语音消息 -->
									<!--                #ifndef H5-->
									<view v-if="item.type== 'TIMCustomElem' && item.payload.data === 'record'"
										class="bubble" @click="playVoice(item.payload.description,item.ID)">
										<!-- <view class="flex flex-jc-fe" :style="`width:${90 + 4*item.payload.extension}rpx;`"> -->
										<view class="flex flex-jc-fe" style="width:90rpx">
											<text class="pr-10">{{ item.payload.extension }}s</text>
											<i-icon icon="iconyuyin2" type="multiple" size="40rpx" color="#666">
											</i-icon>
										</view>
									</view>
									<!--                #endif-->
								</view>
								<!-- 右-头像 -->
								<view class="right">
									<image v-if="userHead !== '' && userHead !== null" :src="userHead"></image>
									<image v-else src="https://files.yzsheng.com/client/weixin/logo.png"></image>
								</view>
							</view>
							<!-- 别人发出的消息 -->
							<view class="other" style="position: relative;left: 20rpx;" v-else>
								<!-- 左-头像 -->
								<view class="left">
									<image v-if="toUserInfo.img !== '' && toUserInfo.img !== null"
										:src="toUserInfo.img">
									</image>
									<image v-else src="https://files.yzsheng.com/client/weixin/logo.png"></image>
								</view>
								<!-- 右-用户名称-时间-消息 -->
								<view class="right">
									<view class="username">
										<view class="name">{{toUserInfo.user | cutString(23)}}</view>
										<view class="time">{{timeFliter(item.time)}}</view>
									</view>

									<!-- 文字消息 -->
									<view v-if="item.type==TIM.TYPES.MSG_TEXT" class="bubble">
										<rich-text :nodes="nodesFliter(item.payload.text)" :selectable="true">
										</rich-text>
									</view>

									<!-- 图片消息 -->
									<view v-else-if="item.type=='TIMCustomElem' && item.payload.data === 'chatFile'"
										class="bubble" @click="previewImage(item.payload.description)">
										<image :src="item.payload.description" mode="aspectFit"></image>
									</view>

									<!-- 订单链接 -->
									<view v-else-if="item.type== 'TIMCustomElem' && item.payload.data === 'orderInfo'"
										@click='clickFn(item.payload.extension,true)'>
										<tim-card :info='JSON.parse(item.payload.description)'></tim-card>
									</view>

									<!-- 语音消息 -->
									<!--                 #ifndef H5-->
									<view v-if="item.type== 'TIMCustomElem' && item.payload.data === 'record'"
										class="bubble" @click="playVoice(item.payload.description,item.ID)">
										<!-- <view class="flex " :style="`width:${90 + 4*item.payload.extension}rpx;`"> -->
										<view class="flex " style="width:90rpx">
											<text class="pl-10">{{ item.payload.extension }}s</text>
											<i-icon icon="iconsaying" type="multiple" size="40rpx" color="#666">
											</i-icon>
										</view>
									</view>
									<!--                #endif-->
								</view>
							</view>
						</block>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class='footer'>
			<view class='item-wrapper' v-for='(item,i) in footerList' :key="i">
				<view class='item' @click="gotoOrderList(i)">
					<i-icon :icon="item.icon" type="single" size="24rpx" color="#FDD421"></i-icon>
				<view class="item-name">{{item.name}}</view>
				</view>
			</view>
			<view v-if="footerList.length !== 3" class="last-item"></view>
		</view> -->
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="em.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="chooseImage">
						<view class="icon tupian2"></view>
					</view>
					<!-- <view class="box" @tap="camera">
						<view class="icon paizhao"></view>
					</view> -->
					<!-- <view class="box" @tap="handRedEnvelopes">
						<view class="icon hongbao"></view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
					@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode" :class="isVoice?'hidden':''">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" cursor-spacing="10"
							maxlength="500" />
					</view>
					<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="send" :class="isVoice?'hidden':''" @tap="sendText">
				<view class="btn">发送</view>
			</view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
		<!-- 红包弹窗 -->
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="icon close" @tap="closeRedEnvelope"></view>
						</view>
						<image src="/static/img/im/face/face_1.jpg"></image>
					</view>
					<view class="from">来自{{redenvelopeData.from}}</view>
					<view class="blessing">{{redenvelopeData.blessing}}</view>
					<view class="money">{{redenvelopeData.money}}</view>
					<view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
						查看领取详情 <view class="icon to"></view>
					</view>
				</view>
			</view>

		</view>

		<tim-card class='info-card' v-if='showCard' :isMsg='true' :info="orderInfo" @del='delCard'
			@sendCard="sendCustomMsg"></tim-card>
	</view>
</template>
<script src="./contactSeller.js"></script>
<style src="./contactSeller.scss" lang="scss">
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}
</style>
